<template>
  <div>
    <ul class="rating_list_ul">
      <li class="rating_list_li" v-for="(item,index) in RatingsData" :key="index">
        <img v-if="item.avatar" :src="'https://fuss10.elemecdn.com/'+item.avatar.split().join('/')" alt="" class="user_avatar">
        <img v-else src="//elm.cangdu.org/img/default.jpg" alt="" class="user_avatar">
        <section class="rating_list_details">
          <header>
            <section class="username_star">
              <p class="username">{{item.username}}</p>
              <p class="star_desc">
              <section class="rating_container">
                <div class="star_container">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xingxing2"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xingxing2"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xingxing2"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xingxing2"></use>
                  </svg>
                  <!-- <svg class="icon" aria-hidden="true" v-if="item.rating>4.5">
              <use xlink:href="#icon-xingxing2"></use>
            </svg> v-else-->
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xingxing2"></use>
                  </svg>
                </div>
              </section>
              <span class="time_spent_desc">{{item.time_spent_desc}}</span>
              </p>
            </section>
            <time class="rated_at">{{item.rated_at}}</time>
          </header>
          <ul class="food_img_ul">
            <li v-for="i in item.item_ratings" :key="i.food_id">
              <!-- d/c8/64033625905f0a15a2d181d53a425jpeg.jpeg -->
              <img v-if="i.image_hash" :src="'https://fuss10.elemecdn.com/'+i.image_hash.split().join('/')" alt="">
            </li>
          </ul>
          <ul class="food_name_ul">
            <li class="ellipsis" v-for="j in item.item_ratings" :key="j.food_id">{{j.food_name}}</li>
          </ul>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      finished: false,
      loading: false
    }
  },
  computed: {
    ...mapState(['RatingsData'])
  },
  methods: {},
  mounted() {
    const obj = {
      restaurant_id: window.sessionStorage.getItem('shopid'),
      tag_name: '全部',
      offset: 0,
      limit: 10
    }
    this.$store.dispatch('getRatings', obj)
  }
}
</script>

<style lang="less" scoped>
.rating_list_ul {
  background-color: #fff;
  padding: 0 0.5rem;
  .rating_list_li {
    border-top: 1px solid #f1f1f1;
    display: flex;
    padding: 0.6rem 0;
    .user_avatar {
      width: 1.5rem;
      height: 1.5rem;
      border: 0.025rem;
      border-radius: 50%;
      margin-right: 0.8rem;
    }
    .rating_list_details {
      flex: 1;
      header {
        display: flex;
        flex: 1;
        justify-content: space-between;
        margin-bottom: 0.3rem;
        .username_star {
          font-size: 0.55rem;
          color: #666;
          .username {
            margin-bottom: 0.2rem;
          }
        }
        .rated_at {
          color: #999;
        }
      }
      .food_img_ul {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.4rem;
        img {
          width: 3rem;
          height: 3rem;
          margin-right: 0.4rem;
          display: block;
        }
      }
      .food_name_ul {
        display: flex;
        flex-wrap: wrap;
        .ellipsis {
          font-size: 0.55rem;
          color: #999;
          width: 2.2rem;
          padding: 0.2rem;
          border: 0.025rem solid #ebebeb;
          border-radius: 0.15rem;
          margin-right: 0.3rem;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.star_desc {
  display: flex;
  align-items: center;
  .time_spent_desc {
    color: #666;
    margin-left: 0.15rem;
  }
}
</style>